<template>
  <Layout
    desc="将大任务拆分成多个小任务，并在不同时间片内执行，以提高系统流畅性和性能"
  >
    <div class="flex flex-col items-center gap-5 mt-60">
      <el-button @click="addNum" type="primary">点击插入10w个数字</el-button>
      <div class="flex flex-wrap gap-5">
        <div v-for="i in arr">{{ i }}</div>
      </div>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { performChunk } from '@/utils/performChunk'

const datas = new Array(100000).fill(0).map((_, i) => i)
const arr = ref<number[]>([])

const addNum = () => {
  performChunk(datas, item => {
    arr.value.push(item)
  })
}
</script>

<style scoped lang="scss"></style>
